<template>
  <div class="class-manage">
    <div class="header">
      <div class="search">
        <span>年级：</span>
        <el-select
          v-model="grade"
          placeholder="请选择年级"
          size="large"
          style="width: 240px"
        >
          <el-option label="一年级" value="1" />
          <el-option label="二年级" value="2" />
          <el-option label="三年级" value="3" />
          <el-option label="四年级" value="4" />
          <el-option label="五年级" value="5" />
          <el-option label="六年级" value="6" />
        </el-select>
        <el-button class="search-btn">搜索</el-button>
      </div>
      <div class="btns">
        <el-button @click="addClass()">创建班级</el-button>
        <el-button>批量删除</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="chapter-list">
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        row-key="id"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="name" label="班级名称" width="250" />
        <el-table-column property="number" label="班级编号" width="150" />
        <el-table-column property="grade" label="年级" width="150" />
        <el-table-column property="studentNum" label="学生数量" width="150" />
        <el-table-column property="status" label="教学状态" width="200" />
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button
              size="small"
              text
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              style="color: #457aff"
            >
              修改
            </el-button>
            <el-button
              size="small"
              text
              type="primary"
              @click="handleEnd(scope.$index, scope.row)"
              style="color: #457aff"
            >
              结课
            </el-button>
            <el-button
              style="margin-left: 0px; color: #457aff"
              text
              type="primary"
              size="small"
              @click="handleManage(scope.$index, scope.row)"
            >
              管理学生
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="my_pagination"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="100"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 修改班级弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      v-model="dialogEdit"
      width="650px"
      @close="dialogEdit = false"
      center
    >
      <div class="dialog-body">
        <el-form
          :inline="true"
          :model="form"
          :rules="rules"
          class="demo-form-inline"
        >
          <el-form-item label="班级名称：" prop="calssName">
            <el-input v-model="form.calssName" placeholder="请输入班级名称" />
          </el-form-item>
          <el-form-item label="年级：" prop="grade">
            <el-input-number
              v-model="form.grade"
              :min="2020"
              :max="new Date().getFullYear()"
              controls-position="right"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            style="background-color: #457aff"
            type="primary"
            @click="dialogExcel = false"
          >
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      grade: "",
      currentPage: 1,
      pageSize: 10,
      tableData: [
        {
          id: 1,
          date: "2016-05-03",
          name: "一年级一班",
          number: "1001",
          grade: "2020",
          studentNum: 100,
          status: "教学中",
        },
        {
          id: 2,
          date: "2016-05-02",
          name: "一年级二班",
          number: "1002",
          grade: "2021",
          studentNum: 100,
          status: "教学中",
        },
        {
          id: 3,
          date: "2016-05-04",
          name: "二年级一班",
          number: "2001",
          grade: "2022",
          studentNum: 100,
          status: "教学中",
        },
        {
          id: 4,
          date: "2016-05-01",
          name: "二年级二班",
          number: "2002",
          grade: "2023",
          studentNum: 100,
          status: "教学中",
        },
        {
          id: 5,
          date: "2016-05-08",
          name: "二年级二班",
          number: "2002",
          grade: "2024",
          studentNum: 100,
          status: "教学中",
        },
        {
          id: 6,
          date: "2016-05-06",
          name: "三年级一班",
          number: "3001",
          grade: "2025",
          studentNum: 100,
          status: "教学中",
        },
        {
          id: 7,
          date: "2016-05-07",
          name: "三年级二班",
          number: "3002",
          grade: "2020",
          studentNum: 100,
          status: "教学中",
        },
      ],
      dialogEdit: false,
      form: {
        calssName: "",
        grade: 2020,
      },
      rules: {
        calssName: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
        ],
        grade: [{ required: true, message: "请输入年级", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 切换tab
    changeTab(tab) {
      this.activeName = tab;
    },
    handleSelectionChange(val) {
      console.log(val, 666);
    },
    handleSizeChange(val) {
      console.log(`${val} items per page`);
    },
    handleCurrentChange(val) {
      console.log(`current page: ${val}`);
    },
    handleEdit(index, row) {
      this.dialogEdit = true;
      this.form.calssName = row.name;
      this.form.grade = Number(row.grade);
      console.log(index, row, 666);
    },
    handleEnd(index, row) {
      console.log(index, row, 666);
    },
    handleManage(index, row) {
      this.$router.push({
        path: "/aiTeaching/courseSystem/manageStudent",
      });
    },
    // 添加班级
    addClass() {
      this.$router.push({
        path: "/aiTeaching/courseSystem/addClass",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.class-manage {
  background-color: #fff;
  padding: 10px 40px 40px 80px;
  box-sizing: border-box;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search {
      display: flex;
      align-items: center;
      gap: 10px;
      span {
        font-size: 16px;
        color: #252e54;
      }
      .search-btn {
        height: 40px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #a5beff;
        color: #457aff;
        line-height: 40px;
      }
    }
    .btns {
      display: flex;
      align-items: center;
      .el-button {
        background: #457aff;
        border-radius: 4px;
        color: #fff;
      }
    }
  }
  .chapter-list {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    .my_pagination {
      :deep(.el-pager li.is-active) {
        color: #457aff;
      }
      :deep(.el-pager li:hover) {
        color: #457aff;
      }
    }
  }

  .dialog-body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    .el-button {
      color: #457aff;
      border: 1px solid #457aff;
      margin-right: 10px;
      &:hover {
        background-color: #457aff;
        color: #fff;
      }
    }
  }
}
</style>